<template>
  <view class="description">
    <skeleton
      animate
      :row="3"
      :loading="!text"
      comp-style="font-size: 28rpx;box-sizing: border-box;color: $font-color-dark;background: #fff;"
    >
      <view class="description__content" @click="showMore">
        {{ (showAll || !needShowMore) ? text : shortText }}
        <text class="description__more" v-if="!showAll && needShowMore">阅读全部 ></text>
      </view>
    </skeleton>
  </view>
</template>

<script>
export default {
  props: {
    text: String
  },

  data() {
    return {
      showAll: false
    };
  },

  computed: {
    shortText() {
      if (this.text && this.text.length > 90) {
        return this.text.substring(0, 70) + '...';
      } else {
        return this.text;
      }
    },

    needShowMore() {
      return this.text && this.text.length > 90;
    }
  },

  methods: {
    showMore() {
      if (this.needShowMore) this.showAll = !this.showAll;
    }
  }
};
</script>

<style lang="scss">
.description {
  font-size: 28rpx;
  padding: 40rpx;
  box-sizing: border-box;
  color: $font-color-dark;
  background: #fff;

  &__more {
    padding-left: 10rpx;
    color: $page-main-color;
    font-size: 24rpx;
  }
}
</style>
